<template>
  <div>
    <div class="gl_mb_15">
      <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="newLabel()">添加标签</el-button>
    </div>
    <el-table v-loading="tableLoading" :data="tableData" class="gl_table_noBorder gl_mt_15" size="mini" style="width: 100%;">
      <el-table-column label="标签名称" prop="name" min-width="120" />
      <el-table-column label="创建时间" :min-width="135">
        <template slot-scope="{row}">
          <span v-if="row.creationTime">
            {{ row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" width="120">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" @click="clickEdit(row)">编辑</el-button>
          <el-button size="mini" type="text" style="color:#FF3434" @click="clickDelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="qo.Page"
        :page-size="qo.MaxResultCount"
        :total="total"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>

    <el-dialog
      :title="title"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :before-close="cancelDialog"
      width="550px"
    >
      <el-form ref="forms" :model="form" label-width="100px" size="mini" style="padding: 30px 30px 40px 30px" :rules="form_Rules">
        <el-form-item label="标签名称" prop="name">
          <el-input v-model.trim="form.name" placeholder="请输入标签名称" maxlength="10" size="mini" type="text" oninput="if(value.length > 20) value.substring(0, 20)" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancelDialog()">{{ $t('button.cancel') }}</el-button>
        <el-button size="mini" type="primary" :loading="btnLoading" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import validator from '@/lib/validate/index.js';
import {
  CustomerTagInput, // 创建客户标签
  Api_GET_ClubCustomerTagQO // 分页获取客户标签信息
} from '@/lib/form/hall/swaggerForm';
import {
  api_POST_ClubCustomerTag, // 创建客户信息
  api_PUT_ClubCustomerTag, // 修改客户标签
  api_DELETE_ClubCustomerTag, // 删除客户标签
  api_GET_ClubCustomerTag // 分页获取客户标签信息
} from '@/extend/api/hallswaggerApi/app';
export default {
  data() {
    return {
      id: '',
      form: new CustomerTagInput(),
      tableLoading: false,
      tableData: [],
      total: 0,
      title: '新增标签',
      dialogVisible: false,
      btnLoading: false,
      qo: new Api_GET_ClubCustomerTagQO(),
      form_Rules: {
        name: [validator.required('标签名称不能为空', 'blur')]
      }
    };
  },
  created() {
    this.getPageList();
  },
  methods: {
    // 获取标签列表
    getPageList(page) {
      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      this.tableLoading = true;
      api_GET_ClubCustomerTag(this.qo).then(res => {
        this.tableLoading = false;
        this.tableData = res.items;
        this.total = res.totalCount;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    clickEdit(item) {
      this.title = '编辑标签';
      this.id = item.id;
      this.dialogVisible = true;
      this.form.name = item.name;
    },
    clickDelete(id) {
      const that = this;
      that.$confirm(`您确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.tableLoading = true;
          api_DELETE_ClubCustomerTag({ 'customerTagId': id }).then(res => {
            that.tableLoading = false;
            that.$message({ type: 'success', message: '删除成功' });
            that.getPageList();
          }, error => {
            that.tableLoading = false;
            const _msg = error.error.message || error.message;
            that.$message({ type: 'error', message: _msg });
          });
        })
        .catch(() => {
        });
    },
    edit() {
      this.btnLoading = true;
      api_PUT_ClubCustomerTag({ 'customerTagId': this.id }, this.form).then(res => {
        this.dialogVisible = false;
        this.btnLoading = false;
        this.$message({ type: 'success', message: '修改成功' });
        this.form = new CustomerTagInput();
        this.getPageList();
        this.id = '';
      }, error => {
        this.btnLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    add() {
      this.btnLoading = true;
      api_POST_ClubCustomerTag(this.form).then(res => {
        this.dialogVisible = false;
        this.btnLoading = false;
        this.$message({ type: 'success', message: '添加成功' });
        this.form = new CustomerTagInput();
        this.getPageList();
      }, error => {
        this.btnLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    confirm() {
      const that = this;
      that.$refs.forms.validate(valid => {
        if (valid) {
          that.id ? that.edit() : that.add();
        } else {
          return false;
        }
      });
    },
    newLabel() {
      this.title = '添加标签';
      this.dialogVisible = true;
    },
    cancelDialog() {
      this.id = '';
      this.form = new Api_GET_ClubCustomerTagQO();
      this.dialogVisible = false;
    },
    // 分页
    sizeChange(MaxResultCount) {
      this.qo.MaxResultCount = MaxResultCount;
      this.getPageList();
    },
    pageIndexChange(currentPage) {
      this.getPageList(currentPage);
    }
  }
};
</script>

<style>

</style>
